<div class="preformatted">
    .--       <a class="kettle" href="https://garden.starstar.website/" rel="noopener noreferrer">☆</a>          <a class="kettle" href="https://garden.starstar.website/" rel="noopener noreferrer">☆</a>      _       ོོོོ    ོོོོ  (`  ). <a class="kettle" href="https://garden.starstar.website/" rel="noopener noreferrer">☆</a>   
 .+(   )   <a class="kettle" href="https://garden.starstar.website/" rel="noopener noreferrer">☆</a>   /\ (`)       -(`  )  <a class="kettle" href="https://garden.starstar.website/" rel="noopener noreferrer">☆</a>    ོོོོ   (      ).   
 (   .  )     <a class="come-along" href="/temple/" rel="noopener noreferrer">⾕</a> (__)_)   :(      ))      _(        '`. 
(   (   )) ˚ /\/\/\  ˚ °  `(    )  ))` ( (         .   )
 `- __.'    /↟↟↟↟↟↟\  <span class="moon"> ☽ </span>   ` __.:'((     (..__.:'-'    
  <a class="kettle" href="https://garden.starstar.website/" rel="noopener noreferrer">☆</a>   /\   /↟↟↟↟↟↟↟↟\      ˚      <a class="kettle" href="https://garden.starstar.website/" rel="noopener noreferrer">☆</a>  `(       ) ) <a class="kettle" href="https://garden.starstar.website/" rel="noopener noreferrer">☆</a>      
˚ °  /↟↟\ /↟↟↟↟↟↟↟↟↟↟\  /\ °   °       (__.:'   )˚       
 °  /↟↟↟↟'::.↟↟↟↟%%&%,\/↟↟\   °     ˚   °   (__.'   ˚    
° ˚/_______Π__ %<a class="kettle" href="/somewhere/the-fall.html" rel="noopener noreferrer">&&%%&</a>%/↟↟↟↟\      °    °       °         
˚ //\^_^_^_^_^\%&%%&&%%↟↟↟↟↟\   ˚         ˚         °   ˚
 //  \_^_/^\_^_\%\Y&%%↟↟↟↟↟↟↟\     ˚    °    ˚     ° ˚   
/ |  | .-. <a class="come-along" href="/weathered-memos" rel="noopener noreferrer">[{}]</a>| ||↟↟↟↟↟↟↟↟↟↟↟\      °   ˚    °   ˚      
~~@._|@|||@_@_@|~||~~~~~~~~~~~~~~<a class="come-along" href="/somewhere/graveyard/" rel="noopener noreferrer">††</a>~~~~ everything i know
"`"""`""") )"""`"""`"""`"""`"""`"""` melts away like snow
.".''𖥧".(.  \.'".𖥧".''.".''.".'"..".''.".''𖥧".'"..".''.".
".'𖥧.'".')   ).'".'..'"𖥧'."'.'.'".'..'".'."'.'.'"𖥧'..'".'
.".''𖥧"./   (".."𖥧''.".''.".'"..".''.".''."𖥧'"..".''.".'.
"𖥧'..'"/    .\.'".'..'".'."'𖥧'.'".'..'".'."'.'.'".'.𖥧'".'
.".''.(       \"..".''."𖥧''.".'".."𖥧''𖥧".''.".'"..".''.".
".'𖥧.'") .,    \ .'.𖥧'".'."'.'.'".'..'".'."'𖥧'.'".'..'".'
<a class="kettle" href="/somewhere/trail-cams.html" rel="noopener noreferrer">^..^₎⟆</a>/         )𖥧''.".''."𖥧'"..".''.".''𖥧".'"..".''.".'.
".'𖥧.(       ; (".'..'".'."'.'𖥧'".'..'".'."'.'.'".'𖥧.'".'
.".''𖥧)         \''.".''<a class="kettle" href="/somewhere/kids.html" rel="noopener noreferrer">(:ᘌꇤ⁐)꒱</a>".''.".''𖥧".'".."𖥧''.".''.
"𖥧'../  ;_;      )'..'".'."'𖥧'.'".'..'"𖥧'."'.'.'".'..'".'
.".'/            (''𖥧".''𖥧".'"../\'.".''.".'".."𖥧''.".''.
~~~~"---''''```---"~~~~~~~~~~~~/  \~~~~~~~~~~~~~~~~~~~~~~
  ~ |= _ _ _ _ _ =|~~ ~ ~ ~ ~~ \   \__   ~  ~  ~~~~ ~~~ ~
 ~~ |=     :     =|~ ~~ ~ ~~~ ~ \   \o\  ~~ ~  ~~~~ ~  ~~
   ~|=  <a class="kettle" href="/somewhere/friends.html" rel="noopener noreferrer">๑ï</a>       =| ~~~ <a class="kettle" href="https://special.fish/about" rel="noopener noreferrer"><><</a>  ~~~ \   \o\=  ~~ ~~~  ~~~~ ~
~ ~ |             |~ ~~~~~ ~  ~~\O/ ~~ ~ ~~ ~ ~ ~~ ~ ~ ~~
~~~~L_____________J~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
</div>
<div class="container"><div class="train">
     ___                 <span id="smoke">. o . o . o . o . o</span>
  __|DDD|__ ___________ _______    ____      o
 | |.\/.| | [<a class="come-along" href="/somewhere/come-along-with-me.html" rel="noopener noreferrer">] [] [] [</a>] [_____(__  ]<a class="come-along" href="/somewhere/hop-on-the-train.html" rel="noopener noreferrer">[]</a>]_n_n__][.
_|_|_/\_|_|_[_________]_[________]_|__|________)<
  oo    oo 'oo      oo ' oo    oo 'oo 0000---oo\_
</div><br><br><br>
-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
</div>

<style>
.moon {
  color: #ffb909;
  position: relative;
  z-index: 1;
}

.moon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 85px;
  height: 85px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
  rgba(255,255,150,0.6) 10%,
  rgba(255,200,0,0.2) 50%,
  rgba(255,255,150,0) 90%
);
  filter: blur(15px);
  animation: moonGlow 10s infinite alternate;
  z-index: -1;
}

@keyframes moonGlow {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.3;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.3;
  }
}

.preformatted, .container, .train {
    font-family: monospace;
    white-space: pre;
    line-height: 1.3;
    font-size: 10px;
    margin: 0 auto;
}

 .container {
    position: relative;
    overflow: hidden;
  }

  .train {
    white-space: pre;
    display: inline-block;
    animation: moveTrain 20s linear infinite; 
    font-family: monospace;
    line-height: 1;
    position: absolute;
    top: -5px;
  }

  @keyframes moveTrain {
  0%   { transform: translateX(-100%); }
  10%  { transform: translateX(-50%); }   
  30%  { transform: translateX(-50%); }    
  70% { transform: translateX(150%); }  
  100% { transform: translateX(150%); }   
}

.come-along {
  text-decoration: none;
  background-color: #d7b83b;
  color: #235e1f;
  border-radius: 3px;
}

a.kettle {
  text-decoration: none;
  background-color: transparent;
  border-radius: 3px;
  animation: color-animation 5s ease-in-out infinite, wiggle 1.5s ease-in-out infinite;
  display: inline-block;
}

a.kettle:hover {
  background-color: #d7b83b;
  animation: none;
  color: #235e1f;
}

@keyframes color-animation {
  0% {
    color: #bfb381;
  }
  30% {
    color: #eeb60d;
  }  
  60% {
    color: #eeb60d;    
  }
  100% {
    color: #bfb381;
  }
}

@keyframes wiggle {
  0% {
    transform: scale(1) rotate(0deg);
  }
  22% {
    transform: scale(1.05) rotate(3deg);
  }
  44% {
    transform: scale(0.95) rotate(-3deg);
  }
  66% {
    transform: scale(1.05) rotate(3deg);
  }
  67% {
    transform: scale(1) rotate(0deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}
</style>

<script>
  const smokeEl = document.getElementById("smoke");
  const patterns = [
    "o . o . o . o . o .",
    ". o . o . o . o . o",
  ];

  let index = 0;
  setInterval(() => {
    smokeEl.textContent = patterns[index];
    index = (index + 1) % patterns.length; 
  }, 900);
</script>

<style>
.firework-particle {
  position: absolute;
  pointer-events: none;
  font-size: 14px;
  font-weight: bold;
  z-index: 100;
  animation: sparkle-fade 5s ease-out forwards;
  display: none;
}

@keyframes sparkle-fade {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.5);
  }
  15% {
    opacity: 0.6;
    transform: translate(calc(var(--tx) * 0.3), calc(var(--ty) * 0.3)) scale(0.8);
  }
  30% {
    opacity: 1;
    transform: translate(calc(var(--tx) * 0.6), calc(var(--ty) * 0.6)) scale(1);
  }
  45% {
    opacity: 1;
    transform: translate(var(--tx), var(--ty)) scale(1.1);
  }
  60% {
    opacity: 0.7;
    transform: translate(calc(var(--tx) * 1.05), calc(var(--ty) * 1.05)) scale(0.95);
  }
  80% {
    opacity: 0.3;
    transform: translate(calc(var(--tx) * 1.1), calc(var(--ty) * 1.1)) scale(0.7);
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--tx) * 1.15), calc(var(--ty) * 1.15)) scale(0.5);
  }
}

@keyframes twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.preformatted {
  position: relative;
}
</style>

<script>
(function() {
  const sparkleChars = ['. ݁', '+', '⊹', '. ݁', '⟡', '݁', '.', '⊹', '+', '݁.'];
  const colors = ['#ffd700', '#ffed4e', '#fff59d', '#ffe082', '#ffb74d', '#ffa726'];
  
  function createFirework(x, y) {
    const container = document.querySelector('.preformatted');
    if (!container) return;
    
    const particleCount = 8 + Math.floor(Math.random() * 8);
    
    for (let i = 0; i < particleCount; i++) {
      const particle = document.createElement('span');
      particle.className = 'firework-particle';
      particle.textContent = sparkleChars[Math.floor(Math.random() * sparkleChars.length)];
      particle.style.color = colors[Math.floor(Math.random() * colors.length)];
      particle.style.left = x + 'px';
      particle.style.top = y + 'px';
      
      const angle = (Math.PI * 2 * i) / particleCount + (Math.random() - 0.5) * 0.5;
      const distance = 20 + Math.random() * 25;
      const tx = Math.cos(angle) * distance;
      const ty = Math.sin(angle) * distance;
      
      particle.style.setProperty('--tx', tx + 'px');
      particle.style.setProperty('--ty', ty + 'px');
      
      container.appendChild(particle);
      
      let morphCount = 0;
      const morphInterval = setInterval(() => {
        if (morphCount < 100 && particle.parentNode) {
          particle.textContent = sparkleChars[Math.floor(Math.random() * sparkleChars.length)];
          morphCount++;
        } else {
          clearInterval(morphInterval);
        }
      }, 80);
      
      setTimeout(() => {
        clearInterval(morphInterval);
        if (particle.parentNode) {
          particle.parentNode.removeChild(particle);
        }
      }, 5000);
    }
  }
  
  function getRandomPosition() {
    const container = document.querySelector('.preformatted');
    if (!container) return { x: 0, y: 0 };
    
    const rect = container.getBoundingClientRect();
    const x = Math.random() * rect.width * 0.8 + rect.width * 0.1;
    const y = Math.random() * rect.height * 0.7 + rect.height * 0.1;
    
    return { x, y };
  }
  
  function triggerRandomFirework() {
    const burstCount = Math.random();
    let fireworkCount;
    
    if (burstCount < 0.2) {
      fireworkCount = 0;
    } else if (burstCount < 0.5) {
      fireworkCount = 1;
    } else if (burstCount < 0.8) {
      fireworkCount = 2;
    } else {
      fireworkCount = 3;
    }
    
    for (let i = 0; i < fireworkCount; i++) {
      setTimeout(() => {
        const pos = getRandomPosition();
        createFirework(pos.x, pos.y);
      }, i * (500 + Math.random() * 300));
    }
    
    const nextDelay = 2000 + Math.random() * 4000;
    setTimeout(triggerRandomFirework, nextDelay);
  }
  
  setTimeout(triggerRandomFirework, 2000);
})();
</script>